<template>
    <div>
        <top-bar></top-bar>
        <left-bar  :datas='data'></left-bar>
        <div class="adddrug system">
            <home-bar :currentPage='currentPage'></home-bar>
             <div class="adddrugs system-main">
                  <div class="main-position">
                     首页  >   药品管理  >   新增药品
                 </div>
                 <div class="main-height"></div>
                  <div class="main-mains">
                 <div class="main-top-nav">
                       <ul>
                            <router-link to="/druglistai/druglist" @click.native="addPath('/druglistai/druglist','药品管理');">
                                <li>药品列表</li>
                            </router-link>
                            <router-link to="/stockmanagement" @click.native="addPath('/stockmanagement','药品管理');">
                                <li>进货管理</li>
                            </router-link>
                            <router-link to="/druglistai/deleteddrugs" @click.native="addPath('/druglistai/deleteddrugs','药品管理');">
                                <li>已删除药品</li>
                            </router-link>
                            <router-link to="/druglistai/shangjia" @click.native="addPath('/druglistai/shangjia','药品管理');">
                                <li>已上架</li>
                            </router-link>
                            <router-link to="/druglistai/xiajia" @click.native="addPath('/druglistai/xiajia','药品管理');">
                                <li>已下架</li>
                            </router-link>
                            <router-link to="/druglistai/shortageofdrugs" @click.native="addPath('/druglistai/shortageofdrugs','药品管理');">
                                <li>缺货药品</li>
                            </router-link>
                            <router-link to="/druglistai/lackdrug" @click.native="addPath('/druglistai/lackdrug','药品管理');">
                                <li>库存预警</li>
                            </router-link>
                            <router-link to="/willexpire" @click.native="addPath('/willexpire','药品管理');">
                                <li>即将过期药品</li>
                            </router-link>
                            <router-link to="/expired" @click.native="addPath('/expired','药品管理');">
                                <li>已过期药品</li>
                            </router-link>
                            <router-link to="/productcategorymgmt" @click.native="addPath('/productcategorymgmt','药品管理');">
                                <li>产品种类管理</li>
                            </router-link>
                            <router-link to="/brandlibrary" @click.native="addPath('/brandlibrary','药品管理');">
                                <li>品牌库</li>
                            </router-link>
                      </ul>
                 </div>
                   <div class="readBarcodeSmall"  v-if="!readBarcodeBig">
                       <a href="#">读取</a>
                       <input type="text" placeholder="请输入药品编号或使用扫码枪扫描商品条码读取药品资料">
                   </div>
                   <div class="readBarcodeBig"  v-show="readBarcodeBig">
                       <input type="text" placeholder="         请输入药品编号或使用扫码枪扫描商品条码读取药品资料">
                       <button @click="showDrug">读取</button>
                   </div>
                   <div class="drugsInfo" v-show="!readBarcodeBig">
                       <h5 class="heading">药品基本信息</h5>
                       <div class="drugsBasicInfo clear">
                           <ul>
                               <li><span>药品分类</span>药品>化学药品>感冒类药物</li>
                               <li><span>药品简介</span>药品简介超长的，那就叠起来吧。鼠标放上来才会显示全部</li>
                               <li><span>药品品牌</span>云南白药</li>
                               <li><span>药品卖点</span>补血补血补血补血补血补血补血补血，一排最多可以放多少个字呢32个字</li>
                               <li><span>基药分类</span>基药类</li>
                               <li><span>经营范围</span>中成药</li>
                           </ul>
                           <ul>
                               <li><span>药品名称</span>复方感康药片</li>
                               <li><span>药品条码</span><img src="../../images/bak01.jpg" alt=""></li>
                               <li><span>药品编号</span>1111111123456</li>
                               <li><span>药监类目</span>普通药物</li>
                               <li><span>件装数量</span>每件中含有2包，每包中含有24小包，很多很多包，这里也是最多32个字</li>
                               <li><span>医保目录</span>是</li>
                           </ul>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">医保类型</h5>
                       </div>
                       <div class="detailedContent">
                              <a href="javascript:void(0);" class="addHealthCareType" @click="addHealthCareTypeFun"><i class="el-icon-plus"></i></a>
                              <div class="healthCareTypeList clear">
                                  <li v-for="(item,index) in healthCareTypeList" :key="index">
                                    {{item.region}}<br>
                                    {{item.type}}
                                    <i class="close" @click="deleteSingleHealthCare(index)"></i>
                                </li>
                              </div>
                        </div>
                       <div class="headingBox">
                           <h5 class="heading">经营范围</h5>
                       </div>
                       <div class="detailedContent">
                           <div class="ScopeOfBusiness">
                                <el-checkbox-group v-model="businessType">
                                    <el-checkbox label="中成药"></el-checkbox>
                                    <el-checkbox label="生化药品"></el-checkbox>
                                    <el-checkbox label="一类医疗器械"></el-checkbox>
                                    <el-checkbox label="体外诊断试剂"></el-checkbox>
                                    <el-checkbox label="中药饮片"></el-checkbox>
                                    <el-checkbox label="疫苗"></el-checkbox>
                                    <el-checkbox label="无证的二类医疗器械"></el-checkbox>
                                    <el-checkbox label="其它药品"></el-checkbox>
                                    <el-checkbox label="保健药品"></el-checkbox>
                                    <el-checkbox label="抗生素"></el-checkbox>
                                    <el-checkbox label="化学药制剂"></el-checkbox>
                                    <el-checkbox label="二类精神药品"></el-checkbox>
                                    <el-checkbox label="三类医疗器械"></el-checkbox>
                                    <el-checkbox label="其它药品"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">药品属性</h5>
                       </div>
                       <div class="detailedContent">
                            <div class="drugsAttr clear">
                                <ul>
                                    <li><span>特殊要求</span><span>中药保护、进口药品</span></li>
                                    <li><span>批准文号</span><span>alghakghaghrlakhgja</span></li>
                                    <li><span>产品规格</span><span>100*100*100</span></li>
                                    <li><span>GMG认证情况</span><span>已认证</span></li>
                                    <li><span>批准日期</span><span>1990/02/13</span></li>
                                    <li><span>药品本位码</span><span>miemiemie</span></li>
                                    <li><span>产地</span><span>那儿</span></li>
                                    <li><span>处方/非处方药</span><span>RX</span></li>
                                    <li><span>生产厂家</span><span>中国制药</span></li>
                                    <li><span>剂型</span><span>片</span></li>
                                    <li><span>产品单位</span><span>片</span></li>
                                    <li><span>通用名</span><span>感冒药</span></li>
                                    <li><span>英文名称</span><span>shit</span></li>
                                    <li><span>拼音首字母</span><span>OU</span></li>
                                </ul>
                            </div>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">生产企业资质</h5>
                       </div>
                       <div class="detailedContent">
                           <div class="checkFile clear">
                                  <ul>
                                      <li><span>营业执照</span><a href="#">查看文件</a></li>
                                      <li><span>GMP证书</span><a href="#">查看文件</a></li>
                                      <li><span>生产许可证</span><a href="#">查看文件</a></li>
                                      <li><span>组织机构代码</span><a href="#">查看文件</a></li>
                                  </ul>
                           </div>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">药品资质</h5>
                       </div>
                       <div class="detailedContent">
                            <div class="checkFile clear">
                                  <ul>
                                      <li><span>生产批件</span><a href="#">查看文件</a></li>
                                      <li><span>药品质量标准</span><a href="#">查看文件</a></li>
                                      <li><span>包装盒及包装备案</span><a href="#">查看文件</a></li>
                                      <li><span>说明书</span><a href="#">查看文件</a></li>
                                      <li><span>质检报告</span><a href="#">查看文件</a></li>
                                      <li><span>商标注册证</span><a href="#">查看文件</a></li>
                                  </ul>
                           </div>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">说明书</h5>
                       </div>
                       <div class="detailedContent">
                            <img src="../../images/bak02.jpg" alt="">
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">药品图片</h5>
                       </div>
                       <div class="detailedContent">
                           <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">产品描述</h5>
                       </div>
                       <div class="detailedContent">
                                <!-- 加载编辑器的容器 -->
                                <script id="container" name="content" type="text/plain">
                                    这里写你的初始化内容
                                </script>
                       </div>
                       <div class="headingBox">
                           <h5 class="heading">包装、售后</h5>
                       </div>
                       <div class="detailedContent clear">
                            <div class="packingList">
                                <h5>包装清单：</h5>
                                <table border="1"  class="packItem">
                                    <tr>
                                        <td>包装内容</td>
                                        <td>数量</td>
                                        <td>操作</td>
                                    </tr>
                                    <tr v-for="(packing,index) in packingList" :key="index">
                                        <td>{{packing.drug}}</td>
                                        <td>{{packing.num}}</td>
                                        <td  @click="deletePack(index)">删除</td>
                                    </tr>
                                </table>
                                <div class="packaInput">
                                    <input type="text" placeholder="请输入包装内容" v-model="drugInput">
                                    <input type="text" placeholder=" 数量" v-model="numInput">
                                    <button>取消</button>
                                </div>
                                <a href="javascript:void(0);" class="addpack" @click="addPack">添加</a>
                            </div>
                            <div class="afterSalesService">
                                <h5>售后服务：</h5>
                                 <el-checkbox-group v-model="checkAfterSalesService">
                                    <el-checkbox label="正品保障"></el-checkbox>
                                    <el-checkbox label="七天无理由退换货"></el-checkbox>
                                    <el-checkbox label="可以喝凉粉加胡椒，加八角，加葱花，加微信，加辣"></el-checkbox>
                                 </el-checkbox-group>
                            </div>
                       </div>
                        <div class="headingBox">
                           <h5 class="heading">智能标签</h5>
                       </div>
                       <div class="detailedContent">
                            <div class="smartTags">
                                <div class="addTags">
                                    <span>智能标签：</span>
                                    <input type="text" placeholder="例如流鼻涕" v-model="tagInput">
                                    <button @click="addTags">添加</button>
                                </div>
                                <div class="tagsList clear">
                                    <div class="tagsItem">
                                        <li v-for="(tag,index) in tagsList" :key="index">
                                            {{index+1}}、{{tag.name}} 
                                            <i class="el-icon-close"  @click="deleteTag(index)"></i>
                                        </li>
                                    </div>
                                    <div class="note">
                                        <h5>备注：</h5>
                                        <p>添加智能标签，让用户更容易搜到这个药品（每行添加一种标签）如：<br>
                                        1、我感冒了<br>
                                        2、感冒用药<br>
                                        3、咳嗽用药</p>
                                    </div>
                                </div>
                            </div>
                       </div>
                       <div class="totalBtn">
                            <a href="#">保存并上架</a>
                            <a href="#">保存暂不上架</a>
                            <a href="#" class="cancelAgment">取消</a>
                        </div>
                   </div>
             </div>
             </div>
<!-- 弹窗开始 -->
            <div class="system-menban" v-show="showSystemPopup"></div>
             <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                     <span>{{systemPopupTitle}}</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <!-- 添加医保类型弹窗 -->
                <div class="addHealthCareTypePopup" v-show="showAddHealthCareType">
                    <div class="itemBox clear">
                        <span class="leftTitle">医保地区</span>
                        <div class="rightMain">
                            <el-select v-model="healthCareRegionValue" placeholder="请选择">
                              <el-option
                                v-for="item in healthCareRegionOptions"
                                :key="item.id"
                                :label="item.province"
                                :value="item.province">
                              </el-option>
                            </el-select>
                          <div class="warningText"><i class="el-icon-warning"></i>请选择医保地区</div>  
                        </div>
                    </div>
                    <div class="itemBox clear">
                        <span class="leftTitle">医保类型</span>
                        <div class="rightMain">
                          <el-select v-model="healthCareTypeValue" placeholder="请选择">
                              <el-option
                                v-for="item in healthCareTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                            <div class="warningText"><i class="el-icon-warning"></i>请选择医保类型</div>
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div @click="addSingleHealthCare">添加</div> 
                        <div @click="hideSystemPopup">取消</div>
                    </div>
                </div>
             </div>
<!-- 弹窗结束 -->
        </div>
    </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "drugManagment",
      currentPage: { path: "/agentadddrug", name: "新增药品" },
      readBarcodeBig: true,
      drugsInfo: false,
      businessType: [],
      dialogImageUrl: "",
      dialogVisible: false,
      drugInput: "",
      numInput: "",
      packingList: [
        {
          drug: "感冒药",
          num: "1"
        },
        {
          drug: "感冒药",
          num: "3"
        }
      ],
      checkAfterSalesService: [],
      tagInput: "",
      tagsList: [
        {
          name: "鼻塞流鼻涕"
        },
        {
          name: "畏寒"
        },
        {
          name: "头重脚轻"
        }
      ],
      healthCareTypeList: [
        //医保类型
        {
          type: "甲类",
          region: "广东省"
        },
        {
          type: "乙类",
          region: "山西省"
        }
      ],
      healthCareRegionOptions: [
        {
          id: "1",
          province_id: "110000",
          province: "北京市"
        },
        {
          id: "2",
          province_id: "120000",
          province: "天津市"
        }
      ],
      healthCareTypeOptions: [
        {
          value: "甲类",
          label: "甲类"
        },
        {
          value: "乙类",
          label: "乙类"
        }
      ],
      showSystemPopup: false,
      systemPopupTitle: "",
      showAddHealthCareType: false,
      healthCareRegionValue: "",
      healthCareTypeValue: ""
    };
  },
  mounted() {
    var ue = UE.getEditor("container", {
      // toolbars: [
      //     ["bold", "italic", "forecolor", "underline", "strikethrough", "|",
      //      "justifyleft", "justifycenter", "justifyright", "insertorderedlist", "insertunorderedlist", "|",
      //      "link", "unlink", "image","fullscreen"]
      // ],
      initialFrameWidth: 800,
      initialFrameHeight: 500,
      zIndex: 0,
      maximumWords: 1000, //允许的最大字符数
      saveInterval: 999999 //自动保存间隔时间，单位ms
    });
    ue.ready(function() {
      //设置编辑器的内容
      ue.setContent("hello");
      //获取html内容，返回: <p>hello</p>
      var html = ue.getContent();
      //获取纯文本内容，返回: hello
      var txt = ue.getContentTxt();
    });
  },
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    showDrug() {
      this.readBarcodeBig = false;
      this.drugsInfo = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    addPack() {
      if (this.drugInput == "" || this.numInput == "") {
        alert("请输入内容");
        return;
      }
      this.packingList.push({
        drug: this.drugInput,
        num: this.numInput
      });
      this.drugInput = "";
      this.numInput = "";
    },
    deletePack(index) {
      if (index >= 0) {
        this.packingList.splice(index, 1);
      } else {
        this.taskList = [];
      }
    },
    addTags() {
      if (this.tagInput === "") {
        alert("请输入标签");
        return;
      }
      this.tagsList.push({
        name: this.tagInput,
        delButton: false
      });
      this.tagInput = "";
    },
    deleteTag(index) {
      this.tagsList.splice(index, 1);
    },
    hideSystemPopup() {
      //关闭弹窗
      this.showSystemPopup = false;
      this.systemPopupTitle = "";
      this.showAddHealthCareType = false;
    },
    addHealthCareTypeFun() {
      //添加医保按钮
      this.showSystemPopup = true;
      this.systemPopupTitle = "添加医保类型";
      this.showAddHealthCareType = true;
      this.healthCareRegionValue = "";
      this.healthCareTypeValue = "";
    },
    deleteSingleHealthCare(index) {
      //删除单个医保类型
      this.healthCareTypeList.splice(index, 1);
    },
    addSingleHealthCare() {
      //添加单个医保类型
      this.healthCareTypeList.push({
        type: this.healthCareTypeValue,
        region: this.healthCareRegionValue
      });
      this.hideSystemPopup();
    }
  }
};
</script>

<style lang="less">
@import "../css/adddrug.less";
</style>
